<template>
  <div class="baseconfig">
    <version-vue v-if="flag" v-model="version"></version-vue>
    <platform-vue v-if="flag" v-model="platform"></platform-vue>
    <compiler-vue
      v-if="flag"
      v-model="compilers"
      :allCompilers="allCompilers"
    ></compiler-vue>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, PropType, ref } from 'vue'
import { useStore } from '@/render/store'
import versionVue from './cmps/version.vue'
import platformVue from './cmps/platform.vue'
import compilerVue from './cmps/compiler.vue'
import { ICompiler, IPlatform, IVersion } from '@/render/store/baseconfig/types'
import { ITabState } from '@/render/store/base/types'
import { ElMessage } from 'element-plus'

export default defineComponent({
  components: {
    versionVue,
    platformVue,
    compilerVue
  },
  props: {
    tab: {
      type: Object as PropType<ITabState>,
      default: () => ({})
    }
  },
  setup(props) {
    const store = useStore()
    let flag = ref(false)
    let version = ref<IVersion>()
    let platform = ref<IPlatform>()
    let compilers = ref<string[]>()
    let allCompilers = ref<ICompiler[]>()

    const update = () => {
      store
        .dispatch('baseconfig/updateBaseConfiguration', {
          projectName: props.tab.projectName,
          version: version.value,
          platform: platform.value,
          compilers: allCompilers.value?.filter((compiler: ICompiler) =>
            compilers.value?.includes(compiler.name)
          )
        })
        .then((res) => {
          ElMessage({
            message: res.message,
            type: 'success'
          })
        })
    }

    onMounted(() => {
      const projectName = props.tab.projectName
      store
        .dispatch('baseconfig/loadBaseConfiguration', projectName)
        .then((res) => {
          flag.value = true
          version.value = res.version
          platform.value = res.platform
          compilers.value = res.compilers
        })
        .catch((res) => {
          ElMessage.error(res.messsage)
        })

      store
        .dispatch('compilers/loadCompilers')
        .then((res) => {
          allCompilers.value = res
        })
        .catch((res) => {
          ElMessage.error(res.messsage)
        })
    })

    return {
      flag,
      version,
      platform,
      compilers,
      allCompilers,
      update
    }
  }
})
</script>

<style scoped>
.baseconfig > div {
  margin-top: 10px;
}
</style>
